<script setup>

import {onBeforeMount, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {tabFormat, getYear, getMonthDay} from "@/utils/common.ts";
import BlackCard from "@/components/card/BlackCard.vue";
import BlackTable from "@/components/table/BlackTable.vue";
import {getDataList} from "@/api/api.js";
import {Clock, Memo, User} from "@element-plus/icons-vue";
import router from "@/router/router.js";

let menuName = '';
let pageInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  type: 1
})
onBeforeMount(() => {
  const route = useRoute();
  let param = route.query;
  let type;
  if (param.type){
    type = String(param.type)
    localStorage.setItem('active_type', type)
  }else {
    type = localStorage.getItem('active_type')
  }
  pageInfo.type = Number.parseInt(type);
  menuName = tabFormat(type);
  getMsg(pageInfo);
  getMsg(allInfo);
})
const allInfo = reactive({
  page: 1,
  size: 10,
  total: 0,
  list: []
})
const formatter = (row, column, cellValue) => {
  return tabFormat(cellValue);
}
const getMsg = (pageInfo) => {
  getDataList(pageInfo).then(res => {
    if (pageInfo.type) {
      res.list.forEach(item => {
        if (item.updateTime) {
          item.year = getYear(item.updateTime);
          item.monthDay = getMonthDay(item.updateTime);
        } else {
          item.year = getYear(item.createTime);
          item.monthDay = getMonthDay(item.createTime);
        }
      })
    }
    pageInfo.total = res.total;
    pageInfo.list = res.list;
  });
}

const clickRow = (row) => {
  router.push({
    path: '/data/content',
    query: {...row}
  })
}
</script>

<template>
  <div class="view-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 15px;position: relative;z-index: 100">
      <el-breadcrumb-item :to="{path: '/data'}">菜市场</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/data/list', query: pageInfo}">
        {{ menuName }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hor-container">
      <black-card id="list" :title="menuName">
        <black-table :query="getMsg" :page-info="pageInfo" :height="500" :click-row="clickRow">
          <el-table-column>
            <template #default="scope">
              <el-descriptions :title="scope.row.title" :column="2" style="color:rgb(90, 94, 124);">
                <el-descriptions-item>
                  <template #label>
                  <span class="author">
                    <el-icon><User/></el-icon>作者
                  </span>
                  </template>
                  <span class="author">{{ scope.row.author }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                  <span class="createTime">
                    <el-icon><Clock /></el-icon>发布时间
                  </span>
                  </template>
                  <span class="timer">{{ scope.row.createTime }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <Memo/>
                    </el-icon>
                    内容
                  </template>
                  <span class="detailContent">{{ scope.row.content }}</span>
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" width="130px">
            <template #default="scope">
              <el-card class="dateCard">
                <div class="year">{{ scope.row.year }}</div>
                <div class="monthDay">/</div>
                <div class="monthDay">{{ scope.row.monthDay }}</div>
              </el-card>
            </template>
          </el-table-column>
        </black-table>
      </black-card>
      <black-card id="allMsg" title="最新发布">
        <black-table :page-info="allInfo" :query="getMsg" :height="350" :click-row="clickRow">
          <el-table-column prop="type" label="类型" :formatter="formatter"></el-table-column>
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template #default="scope">
              <div style="text-decoration:none;cursor: pointer;">
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="日期"></el-table-column>
        </black-table>
      </black-card>
    </div>
  </div>
</template>

<style scoped>
#list {
  width: 60%;
}

#allMsg {
  width: 40%;
  height: 100%;
}

.dateCard {
  background-color: rgb(83, 88, 120);
}

.year {
  color: #fff;
  font-size: 24px;
  text-align: left;
  display: block;
}

.monthDay {
  color: #fff;
  text-align: left;
  display: block;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #list,
  #allMsg {
    width: 100%;
  }
  
  .el-breadcrumb {
    font-size: 12px;
  }
  
  .el-breadcrumb__item {
    font-size: 12px;
  }
  
  .el-descriptions {
    font-size: 12px;
  }
  
  .el-descriptions__label {
    font-size: 12px;
  }
  
  .el-descriptions__content {
    font-size: 12px;
  }
  
  .dateCard {
    padding: 5px;
  }
  
  .year {
    font-size: 18px;
  }
  
  .monthDay {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .el-breadcrumb {
    font-size: 10px;
  }
  
  .el-breadcrumb__item {
    font-size: 10px;
  }
  
  .el-descriptions {
    font-size: 10px;
  }
  
  .el-descriptions__label {
    font-size: 10px;
  }
  
  .el-descriptions__content {
    font-size: 10px;
  }
  
  .dateCard {
    padding: 3px;
  }
  
  .year {
    font-size: 16px;
  }
  
  .monthDay {
    font-size: 10px;
  }
}
</style>